<!DOCTYPE HTML>
<script src='../../../resources/js-test.js'></script>
<script src='../resources/common.js'></script>
<script>description('Option Groups with display: none should not show the children option elements');</script>

<select>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <optgroup label='Four-Five' style='display: none'>
    <option>Four</option>
    <option>Five</option>
  </optgroup>
  <option>Six</option>
  <option>Seven</option>
</select>

<select>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <optgroup label='Four-Five'>
    <option>Four</option>
    <option>Five</option>
  </optgroup>
  <option>Six</option>
  <option>Seven</option>
</select>

<script>

if (window.eventSender) {

  var optgrp = document.querySelectorAll('optgroup');
  var select = document.querySelectorAll('select');

  select[1].focus();
  eventSender.keyDown('ArrowDown');
  eventSender.keyDown('ArrowDown');
  eventSender.keyDown('ArrowDown');
  shouldBeEqualToString('select[1].value', 'Four');


  optgrp[1].style.display = 'none';
  eventSender.keyDown('O');
  eventSender.keyDown('ArrowDown');
  eventSender.keyDown('ArrowDown');
  eventSender.keyDown('ArrowDown');
  shouldBeEqualToString('select[1].value', 'Six');

  select[0].focus();
  eventSender.keyDown('ArrowDown');
  eventSender.keyDown('ArrowDown');
  eventSender.keyDown('ArrowDown');
  shouldBeEqualToString('select[0].value', 'Six');
}

</script>
